<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>收集表单数据</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            收集表单数据：
            若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值
            若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
            若：<input type="checkbox"/>
                1. 没有配置Input的value属性，那么收集的就是checked(勾选 或 未勾选， 是布尔值)
                2. 配置input的value属性：
                    (1) v-model的初始值是非数组，那么收集的就是checked
                    (2) v-model的初始值是数组，那么收集的就是value组成的数组
            备注：v-model的三个修饰点：
                lazy: 失去焦点再收集数据
                number: 输入字符串转为有效的数字
                trim: 输入首尾空格过滤
         -->
        <div id="root">
            <!-- /prevent会阻止默认动作，这样提交表单之后，页面上表单内的数据还是存在的。 -->
            <form @submit.prevent="demo">
                <!-- label的for关联到id为username的元素，当点击label标签时，input框也会出现等待输入的样子 -->
                <label for="username">账号：</label>
                <!-- .trim: 去掉前后空格 -->
                <input type="text" id="username" v-model.trim="userInfo.account"> <br><br>
                <label for="password">密码：</label>
                <input type="password" id="password" v-model="userInfo.password"><br><br>
                <label for="age">年龄：</label>
                <!-- v-model.number控制输入的内容为数字 -->
                <input type="number" id="age" v-model.number="userInfo.age"> <br><br>
                性别：
                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
                爱好：
                学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
                所属地区：
                <select v-model="userInfo.area">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select>
                <br><br>
                其他信息：
                <!-- lazy：当输入后， 并且输入框失去焦点后，才绑定到userInfo.agree上-->
                <textarea v-model.lazy="userInfo.other"></textarea><br><br>
                
                <input type="checkbox" v-model="userInfo.agree"><a href="#">阅读并接收《用户协议》</a><br><br>
                <button>提交</button>
            </form>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    userInfo: {
                        account: '',
                        password: '',
                        age: '',
                        sex: 'male',
                        hobby: [],
                        area: '',
                        other: '',
                        agree: ''
                    }
                },
                methods: {
                    demo(){
                        // 以json格式输出到控制台
                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>
    </body>
</html>
